<template>
	<view class="index">
		<view class="title" :class="topNavStyle.class" :style="topNavStyle.style">
			{{title}}
		</view>
		<card-swiper :regionList="regionList" @swiperChange="swiperChange" :swiperIndex="swiperIndex" @info="goinfo"></card-swiper>
		<view class="info padding-xl radius shadow shadow-lg margin-top bg-gray">
			<view class="name">
				<view class="key">名称:</view>
				<view class="val text-bold">{{regionInfo.regionName}}</view>
			</view>
			<view class="name">
				<view class="key">状态:</view>
				<view class="val">{{regionInfo.regionState}}</view>
			</view>
			<view class="name">
				<view class="key">计费:</view>
				<view class="val">{{regionInfo.regionPrice}}/h</view>
			</view>
		</view>
	</view>
</template>

<script>
	import cardSwiper from "../../components/card-swiper.vue"
	export default {
		components: {
			cardSwiper
		},
		data() {
			return {
				title: '一号澡堂',
				pageScrollTop: 0,
				swiperIndex: 0,
				regionInfo: {}
			}
		},
		onShow() {
			this.getRegionAll()
			
		},
		computed: {
			topNavStyle() {
				let r = this.pageScrollTop / 100;
				return {
					"class": r >= 0.85 ? 'style2' : '',
					"style": `background-color: rgba(66, 185, 131,${r>=1?1:r});`
				}
			},
			regionList() {
				return this.$store.getters['getRegionListData']
			}
		},
		onPageScroll(e) {
			this.pageScrollTop = Math.floor(e.scrollTop);
		},
		methods: {
			getRegionAll() {
				this.$api.getRegionAll().then(res => {
					if (res.code) {
						this.$store.commit('setRegionListData', res.data)
						this.swiperChange(this.swiperIndex)
					}
				})
			},
			swiperChange(index) {
				this.swiperIndex = index
				this.title = this.regionList[index].regionName
				this.regionInfo = this.regionList[index]
			},
			goinfo(item) {
				this.$comm.navigateTo('/pages/info/info?regionId=' + item.regionId)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	/* 标题栏 */
	.title {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: auto;
		padding-top: var(--status-bar-height);
		z-index: 10;
		background-color: rgba(66, 185, 131, 0);
		color: #42BD56;
		text-align: center;
		height: 64upx;
		line-height: 64upx;

		&>view {
			height: 44px;
		}


		.tab {
			&>view {
				margin: 0 30rpx;
				line-height: 64rpx;
				font-size: 36rpx;
				position: relative;
				letter-spacing: 0;
				transition: transform 0.3s ease-in-out 0s;
				transform: scale(1, 1);

				&.active {
					color: rgba(255, 255, 255, 1);
					transform: scale(1.15, 1.15);
				}
			}
		}

		&.style2 {
			color: #FFF;
			background-color: rgba(66, 185, 131, 1);

			.tab {
				&>view {
					&.active {
						color: #FFF;
					}
				}
			}
		}
	}

	.info {
		margin: 60upx;
		height: 360rpx;
		// border: 1upx solid #CCCCCC;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-content: center;

		.name {
			height: 80upx;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.key {
				color: #aaaaaa;
				flex: 0 0 40%;
				text-align: center;
				font-size: 30upx;
			}

			.val {
				font-size: 40upx;
				flex: 1;
				text-align: center;
			}
		}
	}
</style>
